<template>
<el-card>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>轨检数据展示</el-breadcrumb-item>
        <el-breadcrumb-item>轨检数据查询</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 第二行 -->
    <el-row class="secondRow">
        <!-- 下拉菜单选择表 -->
        <el-col :span="8">
            <el-select v-model="tablename" clearable placeholder="请选择" class="tableSelect">
                <el-option v-for="item in tablesList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </el-col>
        <!-- 下拉菜单选择传感器 -->
        <!-- <el-col :span="6">
            <el-select v-model="sensorname" clearable placeholder="请选择">
                <el-option v-for="item in sensorList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </el-col>-->
    </el-row>
    <!-- 第三行 -->
    <el-row class="thirdRow">
        <el-col :span="3" class="col-1"><span>请选择起始里程：</span></el-col>
        <el-col :span="6">
            <!-- 整数数字输入框输入开始公里 -->
            <el-input-number v-model="km" :min="1" :max="1300" label="开始公里"></el-input-number>
            <span class="kmsp">KM</span>
        </el-col>
        <el-col :span="6">
            <!-- 数字输入框输入开始米 -->
            <el-input-number v-model="meters" :min="0" :max="999.75" :precision="2" :step="0.25" label="开始米"></el-input-number>
        </el-col>
        <el-col :span="8">
            <!-- 确定按钮 -->
            <el-button icon="el-icon-search" @click.prevent="handleSearch"></el-button>
        </el-col>
    </el-row>
    <!-- table -->
    <el-table :data="trackdatalist" style="width: 100%" class="trackdataTable" 
      v-loading="loading">
        <el-table-column fixed prop="id" label="#" >
        </el-table-column>
        <el-table-column prop="km" label="KM">
        </el-table-column>
        <el-table-column prop="meters" label="Meters">
        </el-table-column>
        <el-table-column prop="lprf" label="左高低">
        </el-table-column>
        <el-table-column prop="rprf" label="右高低">
        </el-table-column>
        <el-table-column prop="laln" label="左轨向">
        </el-table-column>
        <el-table-column prop="raln" label="右轨向">
        </el-table-column>
        <el-table-column prop="gage" label="轨距">
        </el-table-column>
        <el-table-column prop="cant" label="超高">
        </el-table-column>
        <el-table-column prop="xlvl" label="水平">
        </el-table-column>
        <el-table-column prop="wrap_1" label="三角坑">
        </el-table-column>
        <el-table-column prop="cvtr" label="曲率">
        </el-table-column>
        <el-table-column prop="lacc_1" label="横向加速度">
        </el-table-column>
        <el-table-column prop="vacc" label="垂向加速度">
        </el-table-column>
        <el-table-column prop="lprfLW_3" label="左高低长波">
        </el-table-column>
        <el-table-column prop="rprfLW_3" label="右高低长波">
        </el-table-column>
        <el-table-column prop="lalnLW_3" label="左轨向长波">
        </el-table-column>
        <el-table-column prop="ralnLW_3" label="右轨向长波">
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination class="pages" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
</el-card>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            tablesList: [],
            tablename: '',
            //sensorname: '',
            //sensorList: [],
            km: 1,
            meters: 0,
            trackdatalist: [],
            currentPage: 1,
            pageSize: 10,
            total: 0
        }
    },
    created() {
        this.getTables()
        //this.getSensors()
    },
    methods: {
        async getTables() {
            const res = await this.$http.post('getTables')
            const {
                data,
                code,
                msg
            } = res.data
            let op = []
            for (var i = 0; i < data.length; i++) {
                op[i] = {
                    value: data[i],
                    label: data[i]
                }
            }
            this.tablesList = op
        },
        async handleSearch() {
            const form = {
                tablename: this.tablename,
                km: this.km,
                meters: this.meters,
                currentPage: this.currentPage,
                pageSize: this.pageSize
            }
            this.loading = true
            const res = await this.$http.post('/getTrackData', form)
            console.log(res)
            const {
                data,
                msg,
                code
            } = res.data
            if (code === 200) {
                this.trackdatalist = data.data
                this.total = data.total
                this.$message.success(msg)
                this.loading = false
            } else {
                this.$message.error(msg)
                this.loading = false
            }

        },
        // 分页
        handleSizeChange(val) { // 每页显示条数变换时触发
            // console.log(`每页 ${val} 条`);
            this.pageSize = val
            this.currentPage = 1
            this.handleSearch()

        },
        // currentPage pagesize -> 
        // select * from table limit (currentPage-1)*pagesize,pagesize
        handleCurrentChange(val) { //当前页面改变时触发
            // console.log(`当前页: ${val}`);
            this.currentPage = val
            this.handleSearch()

        }
        // async getSensors() {
        //     const res = await this.$http.post('getSensorList')
        //     const {
        //         data,
        //         code,
        //         msg
        //     } = res.data
        //     let tmp = []
        //     for (var i = 0; i < data.length; i++) {
        //         tmp[i] = {
        //             value: data[i].sensor_no,
        //             label: data[i].sensor_name
        //         }
        //     }
        //     this.sensorList = tmp
        // }
    }
}
</script>

<style>
.secondRow {
    margin-top: 20px;
}

.tableSelect {
    width: 300px;
}

.thirdRow {
    margin-top: 20px;
}

.col-1 {
    text-align: center;
    margin-top: 8px;
    font-weight: bold;
}

.kmsp {
    font-weight: bold;
}
</style>
